<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{$page_title}</title>
    <link rel="stylesheet" href="__ROOT__/tag/bootstrap.min.css"/>
    <link rel="stylesheet" href="__ROOT__/tag/bootstrap.theme.css"/>
    <script src="__ROOT__/tag/jquery-2.0.3.min.js" ></script>
    <script src="__ROOT__/tag/bootstrap.min.js" ></script>

    <style >
        .an{
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 1px;
            margin-right: 1px;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.428571429;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            /*border: 1px solid transparent;*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;

        }
        .an:hover, .an:focus {
            color: red;
            text-decoration: none;

        }


    </style>

</head>
<body>
<div class="table-responsive" style="overflow:scroll;height: 600px">

    <hr>
    {foreach name="tagsname" item="vo" }

        <button  type="button" class="btn {$vo.color}" > {$vo.tagname}</button>

        <div class="btn-group">
            {foreach name="vo['child']" item="v" }
                <button class="an" id="{$v.id}" >{$v.name}</button>
            {/foreach}
        </div>
        <br>
    {/foreach}
    <div class="clearfix form-actions no-padding-left no-padding-right">
        <div class="form-group no-margin-bottom">
            <div style="text-align:center">

                <button class="btn btn-success"id="tag" >确认添加</button>

            </div>
        </div>
    </div>

</div>




<block name="foot">



    <script type="text/javascript">
        //注意：parent 是 JS 自带的全局对象，可用于操作父页面
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

        var ids =  parent.$('#tagid').val();
        var contents =  parent.$('#tags').val();


        var arr = ids.split(' ');
        for(var i in arr){

            $("#"+arr[i]).css("color","red");
        }

        var idListStr = ids+"";
        var tagcontent =contents+ "";


        $(".an").on("click", function(){

            var id = $(this).attr("id");
            $("#"+id).css("color","black");

            idListStr =   idListStr.replace(id ,"");


            tagcontent =  tagcontent.replace($(this).text() ,"");
        });


        $("#tag").on("click", function(){

            parent.$('#tagid').val(idListStr);
            parent.$('#tags').val(tagcontent);
            parent.layer.close(index);
        });
    </script>



</block>
</body>
</html>